<template>
  <el-col>
      <el-input
        placeholder="机构名称"
        v-model="institutionName"
        clearable
        size="mini" @change="searchInstition"
        style="width: 91%;"/>
     <div style="margin-top:5%;;border: 1px solid #dccdcd; margin-right:5%;">
        <el-table
        :data="tableData" ::row-class-name="rowClassName"
        :loading="loadingIns" @row-click="clickData" :row-style="selectedHighlight" 
        :fit="true" style="overflow-y: auto; max-height: 755px;"
        border>
        <el-table-column label="选择医院" prop="institutionName">
            <!-- <template slot-scope="scope">
                <span v-for="item in scope.row.userList" :key="item.institutionId">{{item.institutionName}}</span>
            </template> -->
        </el-table-column>
        </el-table>
     </div>
  </el-col>
</template>

<script>
import InstitutionApi from '@/api/institution/institution';
export default {
    props: {
        id: {
            type:String
        }
    },
    data() {
        return {
            tableData: [],
            institutionName:'',
            institutionId: '',
            loadingIns: false
        }
    },
    created() {
        this.getInstitutionList();
        this.institutionId = this.id
    },
    methods: {
        searchInstition(val){

        },
        chooseValue(val){
            console.log(val,123456)
            console.log( this.tableData,123456)
            // 拿到id 便利数组
            this.institutionId = val
            var row = this.tableData.map(item =>{
                if(item.institutionId == val){
                    return item
                }
            });
            console.log(row,999)
        },
        // 行点击事件
        clickData(row){
            // 点击变色加传参
            console.log(row);
            this.institutionId = row.institutionId
            this.$emit("institutionId",row.institutionId)
        },
        // 设置行名称
        rowClassName({row, rowIndex}){
            row.institutionId = rowIndex;
        },
        // 设置row-行-样式
        selectedHighlight({row, rowIndex}){
            if ((this.institutionId) === row.institutionId ) {
                console.log("进来了")
                return {
                    "background-color": "#CAE1FF"
                };
            }
        },
        getInstitutionList() {
            // 获取机构列表
            let _this = this
            _this.loadingIns = true
            let cond = {
                institutionType: 1
            }
            InstitutionApi.getInstitutionNameList(cond)
            .then(res => {
            setTimeout(() => {
                _this.loadingIns = false
                _this.tableData = res.data
                // _this.tableData = res.data.map(item => {
                //     return {
                //         value: item.institutionId,
                //         label: item.institutionName
                //     }
                // })
                console.log(this.tableData)
            }, 200)
            })
                .catch(error => {
                _this.tableData = []
                console.error(error)
            })
        },
    }
}
</script>

<style scoped>
el-table_1_column_1-on{
    background: pink!important;
}
</style>